<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      width="760px"
      :visible.sync="dialogVisible"
      :before-close="tableClose"
      >
      <el-form 
        label-position="right"
        :model="addInfo"
        label-width="120px"
        ref="formRef"
        inline
        size="mini"
        >

        <el-row>
          <el-col :span="12">
            <el-form-item prop="name " label="供应商名称：" > 
              <el-input v-model="addInfo.name " ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="abbreviation " label="供应商简称：">
              <el-input v-model="addInfo.abbreviation " ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item prop="businessNumber " label="工商注册号：" > 
              <el-input v-model="addInfo.businessNumber " ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="commerceMinistry " label="商务部备案编码:">
              <el-input v-model="addInfo.commerceMinistry " ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item prop="contacts " label="联系人："> 
              <el-input v-model="addInfo.contacts " ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="contactWay " label="联系方式："> 
              <el-input v-model="addInfo.contactWay" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="12">
            <el-form-item prop="legalPerson " label="法人代表：" >
              <el-input v-model="addInfo.legalPerson "></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="manageType " label="经营类别：" >
              <el-select
                v-model="addInfo.manageType"
                placeholder="请选择"
                @change="changeEvent1"
              >
                <el-option
                  v-for="(item) in manageList"
                  :key="item.id"
                  :label="item.type"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item prop="operatorNature  " label="经营者性质:" >
              <el-select
                v-model="addInfo.operatorNature"
                placeholder="请选择"
                @change="changeEvent2"
              >
                <el-option
                  v-for="(item) in operatorList"
                  :key="item.id"
                  :label="item.type"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            
          </el-col>
          <el-col :span="12">
            
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            
          </el-col>
          <el-col :span="12">
            
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="12">
            
          </el-col>
          <el-col :span="12">
            
          </el-col>
        </el-row>

        
      </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeform()">取 消</el-button>
          <el-button type="primary" @click="addMaterInfo">{{message}}</el-button>
        </span>

    </el-dialog>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {
  addInfo,
} from '../../../Api/processingplant/process_supplier'

export default {
  name:'FromInfo',
  inject: ["reload"],
  props:{
    //是否打开表单
    dialogVisible:{
      Boolean,
      default:false
    },
    //经营类型
    manageList:{
      Array
    },
    //经营者性质
    operatorList:{
      Array
    },
    //表头
    dialogTitle:{
      String
    },
    //信息
    addInfo:{
      Object
    },
    message:{
      String
    },
  },
  data(){
    return{
      select:'',
      fileList: []
    }
  },
  computed:{
    ...mapState({
      // column: (state)=>state.materialInfo.columns,
      // rules: (state) => state.materialInfo.rules,

    })
  },
  methods:{
    // 关闭弹窗
    tableClose() {
      this.$confirm('确认关闭？').then(() => {
          this.closeform();
        }).catch(() => {});
    },
    //选择所属品种
    changeEvent1(index) {
      console.log(index);
      this.addInfo.manageType = this.manageList[index].type;
    },
    changeEvent2(index) {
      console.log(index);
      this.addInfo.operatorNature = this.operatorList[index].type;
    },
     //添加原辅料供应商信息
    async addMaterInfo() {
      console.log(this.addInfo);
      const { data: res } = await addInfo(this.addInfo);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("增加成功");
        this.dialogVisible = false;
        this.addInfo = {}
      }else{
        if(res.data == null){
          this.dialogVisible = false;
          return this.$message.warning("添加失败");
        }
      }
      this.reload();
    },
    // 关闭编辑表单弹窗
    closeform() {
      this.$emit("closeDialog");
    },
  }
}
</script>

<style scoped>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__append {
    background-color: #fff;
  }
</style>